﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Geocerca.aspx.cs" Inherits="Reporte_monitoreo_Geocerca" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
 <title><%= IdiomaCultura.getMensaje(IdiomaCultura.WEB_TITULO) %></title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <meta http-equiv="Cache-Control" content="no-cache"/>
 <meta http-equiv="expires" content="-1" />
 <script type="text/javascript" src="<%=Request.ApplicationPath%>/UtilWeb/script/jquery/jquery-1.3.2.min.js"> </script>
 <link rel="stylesheet" type="text/css" media="screen" href="<%=Request.ApplicationPath%>/UtilWeb/Style/GeoStyle.css" />
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&<%=ManagerConfiguration.getCodeCountryGMaps() %>"></script>
 <script type="text/javascript" src="<%=Request.ApplicationPath%>/UtilWeb/Script/keydragzoom.js"></script>
 <script type="text/javascript" src="<%=Request.ApplicationPath%>/UtilWeb/Script/Gmap2.js"></script>
 
 <link href="<%=Request.ApplicationPath%>/UtilWeb/Script/jquery/thickbox/thickbox.css" media="screen" rel="stylesheet" type="text/css" />

 <script type="text/javascript">
    $(document).ready(function(){   
            
            
       //$('#mostrar').addClass("show").removeClass("arrow_top");   
       //$('#MostrarGeo').addClass("show").removeClass("arrow_top"); 
      // $('#BusquedaGeo').addClass("show").removeClass("arrow_top"); 
       $('#map-wrapper1').attr("id","map-wrapper")
        
//       $('#IddivDireccion').hide(); 
//       $('#GuardarGeo').hide(); 
//       $('#IdBusquedaGeo').hide();
        
       //$('#btnGuardar').attr("disabled", "disabled"); 
       /**/
      // $('#btnGuardar').hide();
      // $('#txtDescripcion').attr("disabled", "disabled"); 
       /**/
            
       $('#eliminar_btn').hide( ); 
       $("#Poligono_btn").attr("value", "<%=IdiomaCultura.getMensajeEncodeJS(IdiomaCultura.WEB_POLIGONO).ToUpper() %>" ); 
        
       
         $('#Poligono_btn').click(function(){                    
            if(($('#Poligono_btn').attr("class")) == "btn_poligono")             
            {
 
              $("#Poligono_btn").addClass("btn_puntos").removeClass("btn_poligono"); 
              $("#Poligono_btn").attr("value", "<%=IdiomaCultura.getMensajeEncodeJS(IdiomaCultura.WEB_PUNTOS).ToUpper() %>" ); 
              $('#eliminar_btn').hide(); 
              //$('#btnGuardar').show( ); 
              $('#mensaje').hide();
            }else            
            {
           
            $('#Poligono_btn').addClass("btn_poligono").removeClass("btn_puntos"); 
            $("#Poligono_btn").attr("value", "<%=IdiomaCultura.getMensajeEncodeJS(IdiomaCultura.WEB_POLIGONO).ToUpper() %>" ); 
            $('#eliminar_btn').show( ); 
            //$('#btnGuardar').hide( ); 
            }
        
          
          return true;          
          
          
         })
 
//            $('#mostrar').click(function(){
//              if(($('#mostrar').attr("class")) == "arrow_top")             
//               {
//                $('#IddivDireccion').hide(); 
//                $('#mostrar').addClass("show").removeClass("arrow_top");             
//               }
//               else
//               {
//                $('#IddivDireccion').show(); 
//                 $('#mostrar').addClass("arrow_top").removeClass("show");             
//               }
//            })
//            
             
            
//            $('#MostrarGeo').click(function(){
//              if(($('#MostrarGeo').attr("class")) == "arrow_top")             
//               {
//                $('#GuardarGeo').hide(); 
//                $('#MostrarGeo').addClass("show").removeClass("arrow_top");             
//               }
//               else
//               {
//                $('#GuardarGeo').show();
//                 $('#MostrarGeo').addClass("arrow_top").removeClass("show");             
//               }
//            })
//            
//            
//             $('#BusquedaGeo').click(function(){
//              if(($('#BusquedaGeo').attr("class")) == "arrow_top")             
//               {
//                $('#IdBusquedaGeo').hide(); 
//                $('#BusquedaGeo').addClass("show").removeClass("arrow_top");             
//               }
//               else
//               {
//                $('#IdBusquedaGeo').show(); 
//                 $('#BusquedaGeo').addClass("arrow_top").removeClass("show");             
//               }
//            })
    
            
           
           $('#limpiar_btn').click(function(){ 
           
              if(($('#Poligono_btn').attr("class")) == "btn_poligono"){
           
              }else
              {
                $("#Poligono_btn").click();
                 $("#Poligono_btn").addClass("btn_poligono").removeClass("btn_puntos");            
               }  
           })
          
            $('#IdBoton').click(function(){ 
                 if(($('#IdBoton').attr("class")) == "btnizquierda")    
                 {
                           
                 }
                 else
                 {
                    $('#sidebar').hide();
                    $('#IdBoton').addClass("btnizquierda").removeClass("btnderecha");
                    $('#map-wrapper').attr("id","map-wrapper1")             
                 }
                 
            
            })
            
              $('#boton_Barra2').click(function(){  
              
                if(($('#boton_Barra2').attr("class")) == "btnizquierda")    
                     {         
                     
                        $('#map-wrapper1').attr("id","map-wrapper")
      
                        $('#sidebar').show();
                        $('#IdBoton').addClass("btnderecha").removeClass("btnizquierda");                  
                     }               
              })
        
     });
     
 
 
var enProceso = false;

var points = new Array();
var markers = new Array();
var poligonos = new Array();
var poligono = undefined;
var map;
var line = undefined;
var vertex = true;


var geocoder = new google.maps.Geocoder();

function showAddress(address) {
       $('#mensaje').hide( );
        
       geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);   
        } else {
          $('#mensaje').html('<%= IdiomaCultura.getMensajeEncodeJS(IdiomaCultura.WEB_GEOCERCA_NO_ENCONTRO_DIR)%>');
          $('#mensaje').show( );
         // alert("<%=  IdiomaCultura.getMensajeEncodeJS(IdiomaCultura.WEB_GEOCERCA_NO_ENCONTRO_DIR) %>");
          
        }
      });

}

              
function load() {

    //var myLatlng = new google.maps.LatLng(-12.043769489921695, -77.02840805053711);
    var myOptions = {
                mapTypeControl: true,
                mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                navigationControl: true,
                scaleControl: true,                                      
                mapTypeId: google.maps.MapTypeId.ROADMAP
                };
   
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    map.setCenter(<asp:Literal ID="ltrPuntoCentral" runat="server" />); 
    map.setZoom(12);	
    map.enableKeyDragZoom(); 
   

   <asp:Literal ID="ltrPoints" runat="server" />
   <asp:Literal ID="ltrTracking" runat="server" />
   
   // INICIO HOME
   var LugarInicio = map.getCenter();
   var homeControlDiv = document.createElement('DIV');
   var homeControl = new HomeControl(homeControlDiv, map, LugarInicio);

    homeControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
   //FIN HOME
           
  //   LISTENER
    google.maps.event.addListener(map, "click", function (event) {
              if (!vertex){	//dont add new points in Polygon mode
                return;
              }
                new_marker = new google.maps.Marker({
                        position: event.latLng, 
                        map: map,
                        draggable: true
                        });
                  
                markers.push(new_marker);
                
                  google.maps.event.addListener(new_marker, 'dragend', function() {
                      for(var aux=0; aux<markers.length;aux++){
                        if (markers[aux] == this){
                          points[aux] = this.getPosition();
                        }
                      }  
                      reDraw();
                  });
                  
		        points.push(event.latLng); 
		        reDraw();
        });

   //  FIN LISTENER
   
   

}
  

///////LIMPIA LOS PUNTOS /////////
function clearPoints( ) {
  clearOverlays();
  points= new Array();
  markers= new Array;
  line = undefined;
  poligono = undefined;
  vertex = true;
  $('#hidPk').attr('value','');
  $('#hidPuntos').attr('value','');
  $('#idLabelGeocerca').html('');
  //$('hidEstado').value = '1';
  
  //$('#btnGuardar').hide();
  //$('#txtDescripcion').hide(); 
  $('#txtDescripcion').attr("value", ""); 
       
  $('#Poligono_btn').addClass("btn_poligono").removeClass("btn_puntos"); 
  $("#Poligono_btn").attr("value", "<%=IdiomaCultura.getMensajeEncodeJS(IdiomaCultura.WEB_POLIGONO).ToUpper() %>" ); 
  $('#eliminar_btn').show();
  
}

 function validarDatos( ){
     
     if ( trim($('#hidPuntos').attr('value')) == ''){
         $('#mensaje').html('<%= IdiomaCultura.getMensajeEncodeJS(IdiomaCultura.WEB_MENSAJE_SELECCION)%>');
         $('#mensaje').show( );
        return false;
     }
     
      
      
       if ( trim($('#txtDescripcion').attr("value")) == ''){
         $('#mensaje').html('<%= IdiomaCultura.getMensajeEncodeJS(IdiomaCultura.WEB_MENSAJE_SELECCION)%>');
         $('#mensaje').show( );
         $('#txtDescripcion').focus( );
        return false;
       
       }
       
       $('#mensaje').hide( );
      
    return true;
 }

 function toArray( ) {

     $('#hidPuntos').attr('value','');
     
 
    for (i=0; i<points.length; i++) {
      document.getElementById("hidPuntos").value =  document.getElementById("hidPuntos").value +  points[i].lat() +'|'+ points[i].lng() + '@' ;
    }
 
    if(points.length>0){
         
        // para que no se repita el ultimo punto
        if ( !( points[0].lat( ) == points[points.length-1].lat( ) &&  points[0].lng( ) == points[points.length-1].lng( ) )) {
            document.getElementById("hidPuntos").value = document.getElementById("hidPuntos").value + points[0].lat() +'|'+ points[0].lng() + '@';
        }
    }
    //para borrar el ultimo @
    if(document.getElementById("hidPuntos").value.length>1){
        document.getElementById("hidPuntos").value = document.getElementById("hidPuntos").value.substring(0, document.getElementById("hidPuntos").value.length - 1);
    }
    
 }
 
function reDraw() {
  
  var puntos = new Array() ;
  var puntoInicial;

  for (i=0; i<points.length; i++) {
	puntos[i] = points[i];
   }
  
   if(points.length >0)
   {
        puntos[points.length] = points[0];
        
          if (vertex) {
             if (line) {	 
              line.setMap(null); 
            }	 
             line = new google.maps.Polyline({
                path: points,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
                });
              line.setMap(map);   
          } else {
	        line.setMap(null); 
	        poligono = new google.maps.Polygon({
                paths: puntos,
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.35
            });
        	poligono.setMap(map);
          }
  }
  toArray( );
  
}
//////////// BORRA EL PUNTO ANTERIO /////////////////////
function delLast() {
   
 if(points.length>0)
 {
  points.pop();
  line.setMap(null); 
  markers.pop().setMap(null); 
   
  reDraw();
 }
}

function reShape() {
 
  clearOverlays();
  vertex = !vertex;
  if (vertex) { 
    for (i=0;i<markers.length;i++) {
	   markers[i].setMap(map); 
    }
  }
 reDraw();
 
}  

function clearOverlays() {
  if (markers) {
    for (i in markers) {
      markers[i].setMap(null);
    }
  }
  
  if (poligonos) {
    for (i in poligonos) {
      poligonos[i].setMap(null);
    }
  }
  
   if (line) {
  line.setMap(null); 
  }
   if (poligono) {
    poligono.setMap(null); 
  }
  
  
}

  </script>

 
</head>

 <body id="body"  onload="load()" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" class="sidebar-right">
 
    <div id="cabecera" style="width: 100%; border-style:solid; border-width: 1px; text-align:left">
               <table  style="width: 100%;" border="0" cellpadding="4" cellspacing="0" >  
                <tr>                
                    <td style="background-color:#990000; font-family:Arial; font-size:12px; color:White" align="center" colspan="2">
                        <b><%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_GEOCERCA) %></b>
                        <b>&nbsp; <asp:Label ID="idLabelGeocerca" runat="server"></asp:Label> </b>
                    </td> 
                      
                    <td style="width:1%; background-color:#e8ecf9; font-family:Arial; font-size:12px; color:White" align="center" colspan="2">                
                       <a title="<%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_OPEN_BAR) %>" class="btnizquierda" id="boton_Barra2"><%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_OPEN_BAR) %></a>
                    </td>              
                    
                </tr>
       
              </table>            
    </div>  
 
   <div id="mensaje" style="text-align:center; color:Red; font-weight:bold">
       <asp:Label ID="lblMensaje" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="14px" ForeColor="Red" Text="" Visible="False"></asp:Label>
    </div> 
    
 
 
 <div id="content">
   
    
     <div id="sidebar"  style="height: 650px; text-align:left; font-family:Arial; font-size:11px; " > 
         <form onsubmit="showAddress(this.address.value); return false" action='#' >
         
          <table style="width: 100%;" border="0" cellpadding="2" cellspacing="0" >
           <tr>
                   <td style="background-color:#e8ecf9; font-family:Arial; font-size:12px; color:White" align="center" colspan="2">                
                   <a title="<%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_CLOSE_BAR) %>" class="btnderecha" id="IdBoton"><%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_CLOSE_BAR)%></a>
                </td>                
           </tr>
        </table>          
         
         <table style="width: 100%;" border="0" cellpadding="4" cellspacing="0" >
           <tr>
                   <td style="background-color:#990000; font-family:Arial; font-size:12px; color:White" align="center" colspan="2">
                    <b><%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_GEOCERCA_CREACION)%></b> 
                    <a title="<%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_ABRIRBUSCADOR)%>"  id="mostrar"> </a>
                </td>                
           </tr>
        </table>
        
        <div id="IddivDireccion">
        
            <p>
                <b><%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_UBICACION)%>:</b><br />
	            <input size="15" type="text" name="address"/>	         
	       
	            <%--<input class="btn_buscar" value=""  type="submit" />--%>
	            <input type="submit" class="btn_buscar" value="<%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_BUSCAR) %>" />
	            
	        </p>
  
            
          
          
            <table width="100%">
             <tr></tr>
            <tr>
                <td align="center">          
                    <input id="limpiar_btn" type="button" class="btn_limpiar" onclick="clearPoints()"; value="<%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_LIMPIAR) %>" />
                    
                    <input id="eliminar_btn" type="button" class="btn_delete" onclick="delLast()";  value="<%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_ELIMINAR).ToUpper() %>" />
                </td>
            </tr>
 
            <tr>
                 <td align="center">
                
                    <div id="poligono">
                        <input id="Poligono_btn" class="btn_poligono" onclick="reShape()";  type="button"   />
                    </div>
                </td>
            </tr>            
                         
            </table>
          
            
         </div> 
             <table>
              <div style="height: 4px;"></div>                   
            </table>
         
            
           </form> 
           <form id="test" runat="server" >
            <table style="width: 100%;" border="0" cellpadding="4" cellspacing="0" >
                <tr>
                 <td style="background-color:#990000; font-family:Arial; font-size:12px; color:White" align="center" colspan="2">
                    <b><%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_GEOCERCA_GUARDAR)%></b>
                    <a title="<%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_ABRIRBUSCADOR)%>"  id="MostrarGeo"></a> 
                </td>                
                </tr>
              
            </table>  
           <div id="GuardarGeo">   
            <table width="100%">
              <tr>
                <td>
                    <b><%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_DESCRIPCION)%>: </b> <br />
                    <input id="txtDescripcion" size="15" runat="server" maxlength="50" name="txtNombre" class="text" style="width:200px;" type="text" />
                    
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtDescripcion"
                     ErrorMessage="<span style='color:Black'>©</span>Nombre" SetFocusOnError="True">*</asp:RequiredFieldValidator>
                 </td>
              </tr>      
              <tr align="center">
                <td>                 
                        <input id="hidPuntos" type="hidden" runat="server" />
                        <input id="hidPk" type="hidden" runat="server" />
                        <%--<input id="hidEstado" type="hidden" value="1"; runat="server" />--%>
                        <asp:Button ID="btnGuardar"  CssClass="btnGuardar" runat="server" OnClick="btnGuardar_Click1" OnClientClick="return validarDatos( );" />                       
                        <%-- <asp:Button ID="btnCancelar" CssClass="btnCancelar" runat="server" Text="" ValidationGroup="xx" OnClick="btnCancelar_Click" />--%> 
                  
                 </td>
                             </tr>
             </table>
             <br /><br />
            </div>
            
            
            <table>
              <div style="height: 4px;"></div>                   
            </table>
            
            
            
            
            <table style="width: 100%;" border="0" cellpadding="4" cellspacing="0" >
                <tr>
                 <td style="background-color:#990000; font-family:Arial; font-size:12px; color:White" align="center" colspan="2">
                    <b><%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_GEOCERCA_BUSQUEDA)%></b> 
                    <a title="<%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_ABRIRBUSCADOR)%>""<%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_ABRIRBUSCADOR)%>" id="BusquedaGeo"></a> 
                </td>                
               </tr>
            </table> 
            <div id="IdBusquedaGeo">   
            <table width="100%">  
               <tr>
                <td>
                    <b><%=IdiomaCultura.getMensajeEncodeHTML(IdiomaCultura.WEB_ZONAS)%>: 
                        <asp:DropDownList ID="cmbZonas" runat="server" AutoPostBack="False" CssClass="textinput"  Style="width: 200px">
                        </asp:DropDownList></b></td>
                 
               </tr> 
               
               <tr align="center">
                <td>              
                  <table width="100%">
                    <tr></tr>
                    <tr>
                    <td align="center">  
                   <asp:Button ID="btnObtener"  class="btnObtener" ValidationGroup="xx" runat="server" Text=""  OnClick="btnObtener_Click" />
                   <%--<asp:Button ID="btnCancelar" class="btnCancelar" runat="server" Text="" ValidationGroup="xx" OnClick="btnCancelar_Click" /> --%>
                    <asp:Button ID="btnTodos" class ="btnTodos" runat="server" Text="" ValidationGroup="xx" OnClick="btnTodo_Click" />  
                   </td>
                    </tr>
                     <tr>
                     <td align="center">
                  
                    
                </td>
            </tr>            
                         
            </table>
               </td>
              </tr> 
            </table> 
            </div> 
           </form>  
    </div>  
    
    <div id="map-wrapper1" >     
         <div id="map" style="height: 650px; background-color: rgb(229, 227, 223); text-align:left; font-family:Arial; font-size:11px; border-style:solid; border-width: 0px;">
         </div>
    </div>
 </div>   
<div style="PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; WIDTH: 600px; PADDING-RIGHT: 10px; FONT-SIZE: 0.9em; PADDING-TOP: 10px">
 
</body> 
</html>
